<template>
    <div class="productdetail">
        <!-- <navback class="pro" title="商品详情" left-text="&lt; 返回"></navback> -->
        <van-nav-bar title="商品详情" left-text="返回" left-arrow @click-left="onClickLeft"   />

        <div class="productdetail-content" v-for="(item, index) in DetailData" :key="index">
            <!-- 上部分图片名字 -->
            <div class="detailTop">
                <div class="img-box">
                    <img class="img-auto" :src="item.Img" />
                </div>
                <div class="toprig">
                    <div class="shopName">{{ item.name }}</div>
                    <div class="desc">{{ item.desc }}</div>
                </div>
            </div>
            <div class="detailRule">
                <div class="cup">{{ item.cup }}</div>
                <div class="cuprule">
                    <div @click="clicktab1(index)" :class="[index == activeIndex1 ? 'active' : '']" v-for="(item, index) in cuprule" :key="index" class="rule-item">{{ item.title }}</div>
                </div>
                <div class="temp">{{ item.temp }}</div>
                <div class="temprule">
                    <div @click="clicktab2(index)" :class="[index == activeIndex2 ? 'active' : '']" v-for="(item, index) in temprule" :key="index" class="rule-item">{{ item.title }}</div>
                </div>
                <div class="sugar">{{ item.sugar }}</div>
                <div class="sugarrule">
                    <div @click="clicktab3(index)" :class="[index == activeIndex3 ? 'active' : '']" class="rule-item" v-for="(item, index) in sugarrule" :key="index">{{ item.title }}</div>
                </div>
                <div class="num-box">
                    选择数量
                    <van-stepper class="num" v-model="value" theme="round" button-size="22" disable-input />
                </div>
            </div>
        </div>
        <!-- 商品导航栏 -->
        <van-goods-action>
            <van-goods-action-icon icon="cart" text="购物车" @click="tocar" />
            <van-goods-action-icon icon="like" :color="islick ? '#e4393c' : ''" :text="islick ? '已收藏' : '收藏'" @click="lick" />
            <van-goods-action-button color="blue" @click="Car" type="warning" text="加入购物车" />
            <van-goods-action-button color="#e4393c" type="danger" text="立即购买" @click = "goclose" />
        </van-goods-action>

        <!-- <van-badge :content="value">
        <div class="child" style="margin-left: 40px"/>
        </van-badge> -->
    </div>
</template>

<script>
import { Toast } from "vant";
import { getMenuData } from "../api/MenuData.js";
import navback from "../components/Navback.vue";

export default {
    name: "Productdetail",
    data() {
        return {
            value: 1,
            activeIndex1: 0,
            activeIndex2: 0,
            activeIndex3: 0,
            islick: false,
            DetailData: [],
            lists: [],
            car: null,
            carlists: [],
            carpage: [],
            lickList:[],
            cuprule: [
                {
                    title: "大杯",
                },
                {
                    title: "小杯",
                },
            ],
            temprule: [
                {
                    title: "热",
                },
                {
                    title: "正常冰",
                },
                {
                    title: "少冰",
                },
            ],
            sugarrule: [
                {
                    title: "正常糖",
                },
                {
                    title: "七分糖",
                },
                {
                    title: "五分糖",
                },
            ],
        };
    },
    components: {
        getMenuData,
        navback,
    },

    methods: {
        onClickLeft() {
            this.$router.back();
        },
        clicktab1(index) {
            this.activeIndex1 = index;
            this.car = this.cuprule[index].title;
            console.log(this.carlists.length);
            if (this.carlists.length < 3) {
                if (this.carlists.indexOf(this.car) === -1) {
                    this.carlists.push(this.car);
                    // console.log(this.carlists);
                } else {
                    return;
                }
            } else {
                this.carlists.pop()
                return;
            }
        },
        clicktab2(index) {
            this.activeIndex2 = index;
            this.car = this.temprule[index].title;
            if (this.carlists.length < 3) {
                if (this.carlists.indexOf(this.car) === -1) {
                    this.carlists.push(this.car);
                    // console.log(this.carlists);
                } else {
                   
                    return;
                }
            } else {
                this.carlists.pop()
                return
            }
        },
        clicktab3(index) {
            this.activeIndex3 = index;
            this.car = this.sugarrule[index].title;
            if (this.carlists.length < 3) {
                if (this.carlists.indexOf(this.car) === -1) {
                    this.carlists.push(this.car);
                    // console.log(this.carlists);
                } else {
                    return;
                }
            } else {
                this.carlists.pop()
                return;
            }
        },
        // 初始化页面,判断商品是否已收藏
        init(){
            console.log(444);
        },
        // 收藏
        lick() {
            console.log();
            this.islick = !this.islick;
            if(this.islick ===true){
                // console.log(this.DetailData);
                this.lickList.push(...this.DetailData)
                console.log(this.lickList);
                // 将收藏列表数组保存到本地
                localStorage.setItem("collectList",JSON.stringify(this.lickList))
            }else{
                this.lickList.splice()
            }
            // if (this.islick === true) {
            //     if(this.lists.indexOf(this.DetailData)!==-1){
            //         return
                    
            //     }else{
            //         this.lists.push(this.DetailData);
            //         console.log(this.DetailData);
            //         console.log(this.lists);
            //         window.localStorage.setItem("collect", JSON.stringify(this.lists));
            //     }
            // } else {
            //     localStorage.removeItem("collect");
            // }
        },
        // 加入购物车
        Car() {
            Toast("加入成功");
            this.DetailData[0].shuju = this.carlists;
            this.carpage.push(this.DetailData);
            console.log(this.carpage);
            window.localStorage.setItem("car", JSON.stringify(this.carpage));
        },
        // 跳转购物车页面
        tocar() {
            this.$router.push({
                name: "Car",
            });
        },
        goclose(){
            this.$router.push({
                name:'Close',
                query:{
                    Product:JSON.stringify(this.DetailData)
                }
            })
        }
    },
    created() {
        console.log(this.DetailData);
        this.init()
        console.log(this.$route.query.item);
        let id = this.$route.params.id;
        // console.log(id);
        let item = JSON.parse(this.$route.query.item);
        // console.log(item);
        this.DetailData.push(item);
        //    console.log(this.DetailData);

        if (localStorage.shoucang) {
            this.lists = JSON.parse(localStorage.getItem("shoucang"));
        }
        if (localStorage.car) {
            this.carpage = JSON.parse(localStorage.getItem("car"));
        }
    },
};
</script>

<style lang="less" scoped>
.productdetail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /deep/ .van-nav-bar__title {
        color: #656565;
        font-size: 18px;
    }

    /deep/ .van-nav-bar__text{
        color: #656565;
    }
    /deep/ .van-icon-arrow-left{

        color: #656565;
    }
    // .pro {
    //     // color: blue;
    //     // font-weight: 700;
    // }
    .productdetail-content {
        height: calc(100% - 100px);
        .detailTop {
            width: 100%;
            height: 30%;
            // background-color: pink;
            display: flex;
            .toprig {
                margin-left: 10px;
                margin-top: 10px;
                .shopName {
                    width: 193px;
                    font-size: 20px;
                    font-weight: bold;
                    margin-bottom: 5px;
                }
                .desc {
                    color: #c5c5c5;
                    font-size: 14px;
                }
            }
            .img-box {
                width: 170px;
                height: 170px;
                // background-color: blue;
                .img-auto {
                    width: 100%;
                    display: block;
                }
            }
        }
        .detailRule {
            width: 100%;
            height: 70%;
            // background-color: red;
            .num-box {
                margin: 20px 0 0 20px;
                color: #c5c5c5;
                font-size: 16px;
                .num {
                    margin-top: 20px;
                }
            }
            .cup,
            .temp,
            .sugar {
                color: #c5c5c5;
                font-size: 16px;
                padding: 20px 0 10px 10px;
            }
            .cuprule {
                display: flex;
                margin: 0 0 0 10px;
                .rule-item {
                    width: 80px;
                    height: 30px;
                    background-color: #fff;
                    text-align: center;
                    line-height: 30px;
                    font-size: 15px;
                    margin-right: 20px;
                    color: #9e9e9e;
                    border: 1px solid #9e9e9e;
                    border-radius: 10px;
                }
                .active {
                    background-color: red;
                    color: #fff;
                }
            }
            .temprule {
                display: flex;
                margin: 0 0 0 10px;
                .rule-item {
                    width: 80px;
                    height: 30px;
                    background-color: #fff;
                    text-align: center;
                    line-height: 30px;
                    font-size: 15px;
                    margin-right: 20px;
                    color: #9e9e9e;
                    border: 1px solid #9e9e9e;
                    border-radius: 10px;
                }
                .active {
                    background-color: red;
                    color: #fff;
                }
            }
            .sugarrule {
                display: flex;
                margin: 0 0 0 10px;
                .rule-item {
                    width: 80px;
                    height: 30px;
                    background-color: #fff;
                    text-align: center;
                    line-height: 30px;
                    font-size: 15px;
                    margin-right: 20px;
                    color: #9e9e9e;
                    border: 1px solid #9e9e9e;
                    border-radius: 10px;
                }
                .active {
                    background-color: red;
                    color: #fff;
                }
            }
        }
    }
}
</style>
